<!-- 预约详情 -->
<template>
	<view class="appointmentInfoContainer">
		<view class="appointmentInfoHead flex" @click="jumpInfoPage()">
			<image :src="appopintmentInfo.laboratoryPic" v-if="appopintmentInfo.laboratoryPic" class="classRoomImg"></image>
			<image src="../../static/images/classroomPic.png" v-else class="classRoomImg"></image>
			<view class="appointmentInfoHeadBox">
				<view class="appointmentInfoHead-title txtOverFlow">
					{{appopintmentInfo.laboratoryName}}
					<text v-if="appopintmentInfo.shareOrderCount < appopintmentInfo.minPersonCount">（空闲中）</text>
					<text v-else-if="appopintmentInfo.shareOrderState == 10 ">（待开放）</text>
					<text v-else-if="appopintmentInfo.shareOrderState == 20">（使用中）</text>
				</view>
				<view class="appointmentInfoHead-subTxt flex">
					<text>位置：</text>
					<text class="ftc6">{{appopintmentInfo.laboratoryName}}</text>
				</view>
				<view class="appointmentInfoHead-subTxt flex">
					<text>简介：</text>
					<text class="ftc6">{{appopintmentInfo.laboratoryExplain}}</text>
				</view>
			</view>
			<image src="../../static/images/moreIconHui.png" class="moreIconHui"></image>
		</view>
		<view class="appointmentInfoBox2">
			<view class="appointmentInfoItem flex">
				<view class="appointmentInfoLabel">预约日期</view>
				<view class="appointmentInfoTxt">{{appopintmentInfo.appointmentDate}}({{week}})</view>
			</view>
			<block v-if="appopintmentInfo.isShare == 0 && appopintmentInfo.isPositionAppointment != 1 && appopintmentInfo.orderDetailList&&appopintmentInfo.orderDetailList.length > 0">
				<view class="timeListItem" v-for="item,index in appopintmentInfo.orderDetailList" :key='index'>
					{{item.startTime}}-{{item.endTime}}
				</view>
			</block>
			<block v-if="appopintmentInfo.isShare == 0 && appopintmentInfo.isPositionAppointment == 1 && appopintmentInfo.orderDetailList&&appopintmentInfo.orderDetailList.length > 0">
				<view class="stationItem" v-for="item,index in appopintmentInfo.orderDetailList" :key='index'>
					<view>{{item.startTime}}-{{item.endTime}}</view>
					<view>{{item.siteName}}</view>
				</view>
			</block>
			
			<!-- <view class="appointmentInfoItem flex">
				<view class="appointmentInfoLabel">使用教室</view>
				<view class="appointmentInfoBtn" v-if="appopintmentInfo.orderState == 70" style="margin-left: 40%;background: #bcbcbc">扫码开门</view>
				<view class="appointmentInfoBtn" v-else @click="scanOpenDoor()" style="margin-left: 40%;">扫码开门</view>
			</view> -->
		<!-- 	<view class="appointmentInfoItem flex">
				<view class="appointmentInfoLabel">签到情况：{{appopintmentInfo.totalSignedCount}}/{{appopintmentInfo.visitedUserCount}}</view> 
			</view> -->
		<!-- 	<view class="appointmentInfoItem flex">
				<view class="appointmentInfoLabel">签退情况：{{appopintmentInfo.totalOutCount}}/{{appopintmentInfo.totalSignedCount}}</view> 
			</view> -->
 	
		</view>
	 
		
		
		<!--下面是开门二维码的内容-->
		<view class="qrImg" v-show="showScanCode">
			<tki-qrcode 
			ref="qrcode" 
			:val="val" 
			:size="size" 
			:unit="unit" 
			:iconSize="iconsize" 
			 :lv="lv" 
			 :onval="onval" 
			 :loadMake="loadMake"
			 :showLoading="showLoading" 
			 :loadingText="loadingText" />
			<view class="appointmentInfoSubTxt" @click="scanOpenDoor()">刷新二维码</view>
		</view>
		
		<view class="subTit" style="text-align: center;">{{appopintmentInfo.laboratoryName}}开门签到码</view>
		<view class="subTit" style="text-align: center;">{{appopintmentInfo.totalSignedCount}}/{{appopintmentInfo.visitedUserCount}}</view>
		<view class="subTit" style="text-align: center;">备注: 预约结束后，主预约人记得返回个人中心完成签退，谢谢！</view>
		
	 
		
		
		
		
<!-- 		
		<view class="submitBtnBox"> -->
			<!-- 2.在订单详情页面如果订单状态是 20（使用中）且当前人已签到 isSigned=1 则 签退 按钮 -->
			<!-- <view class="submitBtn" style="width:45%" v-if="appopintmentInfo.orderState == 20 && appopintmentInfo.isSigned == 1 && appopintmentInfo.isOut == 0" @click="signOut()">签退</view>
			 --><!-- 未签到的订单显示  取消按钮 -->
	<!-- 		<view class="submitBtn" style="width:45%"  v-else-if=" (appopintmentInfo.orderState == 10||appopintmentInfo.orderState == 0 )&& appopintmentInfo.isSigned != 1" @click="cancleOrder()">取消预约</view>
	
			
			<view class="appointmentInfoBtn" style="width:45%"  v-if="appopintmentInfo.orderState == 70" style="margin-left: 40%;background: #bcbcbc">扫码开门</view>
			<view class="appointmentInfoBtn" style="width:45%"  v-else @click="scanOpenDoor()" style="margin-left: 40%;">扫码开门</view>
	 -->
<!-- 	
		</view> -->
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
	export default {
		components: {
			tkiQrcode,
		},
		data() {
			return {
				modal_qr: false,
				orderId: '',
				week: '',
				appopintmentInfo: {},
				showScanCode: false,
				scanCodeImg:'',
				//下面是开门二维码用到的参数
				qrCode:"",
				val: '',
				size: 200,
				iconsize: 30,
				lv: 3,
				onval: true,
				unit: 'rpx',
				loadMake: true,
				showLoading: true,
				loadingText: '二维码生成中',
				searchTimer: null ,//轮询
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
		},
		onShow() {
			this.searchInfo();
		},
		methods: {
			jumpInfoPage() {
				let date = this.appopintmentInfo.appointmentDate;
				let laboratoryId = this.appopintmentInfo.laboratoryId;
				uni.navigateTo({
					url: '/pages/classroomInfo/classroomInfo?laboratoryId='+laboratoryId+'&date='+date
				});
			},
			jumpPage() {
				let _this = this;
				let isZj = _this.appopintmentInfo.isShare == 1 ? 1 : 2;
				/* uni.navigateTo({
					url: '/pages/invitation/invitation?shareCode='+_this.appopintmentInfo.shareCode+'&roomLocation='
						+_this.appopintmentInfo.laboratoryName+'&appointmentDate='+_this.appopintmentInfo.appointmentDate
						+'&isZj='+isZj+'&startTime='+_this.appopintmentInfo.startTime+'&endTime='+_this.appopintmentInfo.endTime
						+'&orderId='+_this.orderId
				}); */
				uni.navigateTo({
					url: '/pages/invitation/invitation?orderId='+_this.orderId
				});
			},
			searchInfo() {
				let _this = this;
				this.$utils.requestFun('/stadium/laboratoryOrder/api/getLaboratoryOrderDetail?route=curriculum',{
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					orderId: _this.orderId 
				},'GET').then(res=> {
					_this.appopintmentInfo = res.data.data;
					console.log("isVisited:",_this.appopintmentInfo.isVisited);
					_this.valInv = getApp().globalData.serverUrl + '/wx/index.html#/pages/classroom/classroom?orderId='+_this.orderId;	
					let weekIdx = new Date(res.data.data.appointmentDate).getDay();
					this.week = "周" + "日一二三四五六".charAt(weekIdx);
					_this.scanOpenDoor('');
				});
			},
			//扫码开门
			scanOpenDoor(flag='') {
				let _this = this;
				this.$utils.requestFun('/security/DW200Api/api/getDw20OpenCodeByOrderId',{
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					orderId: _this.orderId 
				},'GET').then(res=> {
					if(res.data.data && res.data.data != '') {
						_this.showScanCode = true;
						_this.scanCodeImg = res.data.data;
						_this.val = res.data.data;
						// #ifdef H5
						if(flag == '') {
							this.scanOpenDoor(1);//H5情况下要点两次才能出来二维码，很奇怪，所以多调用一次
						}else {
							_this.invertalSearch();
						}
						// #endif	
						
						// #ifdef MP-WEIXIN
							_this.invertalSearch();	
						// #endif
					}
				});
			},
			searchState() {
				let _this = this;
				uni.request({
					url: getApp().globalData.serverUrl+'/stadium/laboratoryOrder/api/checkDoorOpenCode?route=curriculum',
					data: {
						token: getApp().globalData.token,
						code: _this.scanCodeImg 
					},
					method: 'GET',
					success(res){
						if(res.data.msg && res.data.msg != '') {
							clearInterval(_this.searchTimer);
							_this.searchTimer = null;
							uni.showModal({
							    title: '提示',
							    content: res.data.msg,
								showCancel: false,
							    success: function (res) {
							        if (res.confirm) {
							            console.log('用户点击确定');
							        }
							    }
							});
						}
					}
				});
			},
			//轮询查询二维码是否打开
			invertalSearch() {
				let _this = this; 
				this.searchTimer = setInterval(()=> {
					_this.searchState();
				},1000)
			},
			//签退
			signOut() {
				
				let _this = this;
				uni.showModal({
								    title: '提示',
								    content: _this.appopintmentInfo.signOutMsg,
								    success: function (res1) {
								        if (res1.confirm) {
								
				
				this.$utils.requestFun('/stadium/laboratoryOrder/api/memberDoSignOut?route=curriculum',{
					token: getApp().globalData.token,
					appId: getApp().globalData.appid,
					orderId: _this.orderId 
				},'GET').then(res=> {
					console.log(res);
					uni.showToast({
						title: '签退成功！',
						success() {
							setTimeout(()=> {
								uni.navigateBack({
								    delta: 1
								});
							},1000)
						}
					})
				});
				
				
				
				        } else if (res1.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
				
			},
			//取消订单
			cancleOrder(data) {
				let _this = this;
				uni.showModal({
				    title: '提示',
				    content: '是否确认取消订单？',
				    success: function (res) {
				        if (res.confirm) {
							_this.$utils.requestFun('/stadium/laboratoryOrder/api/memberCancelLaboratoryOrder?route=curriculum',{
								token: getApp().globalData.token,
								appId: getApp().globalData.appid,
								orderId: _this.orderId
							},'GET').then(res=> {
								console.log(res);
								uni.showToast({
									title: '取消成功！',
									success() {
										setTimeout(()=> {
											uni.navigateBack({
											    delta: 1
											});
										},1000)
									}
								})
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		},
		onHide: function() {
			if(this.searchTimer) {
				clearInterval(this.searchTimer);
				this.searchTimer = null;
			}
		},
		onUnload: function() {
			if(this.searchTimer) {
				clearInterval(this.searchTimer);
				this.searchTimer = null;
			}
		},
		destroyed: function() {
			if(this.searchTimer) {
				clearInterval(this.searchTimer);
				this.searchTimer = null;
			}
		}
	}
</script>

<style>
	.appointmentInfoContainer {
		width: 100%;
		height: 100%;
		padding-bottom: 140rpx;
		background: #FFFFFF;
	}
	.txtOverFlow {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.flex {
		display: flex;
	}
	.classRoomImg {
		width: 140rpx;
		height: 140rpx;
		margin: 30rpx 14rpx 0 34rpx;
	}
	.appointmentInfoHead {
		width: 100%;
		height: 200rpx;
		background-image: url("https://t.acoer.cn/guoshiBgImg/appointmentInfoBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.appointmentInfoHeadBox {
		width: 69%;
	}
	.appointmentInfoHead-title {
		font-size: 34rpx;
		color: #222222;
		line-height: 58rpx;
		margin-top: 24rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
	}
	.appointmentInfoHead-subTxt {
		font-size: 24rpx;
		color: #999999;
		line-height: 40rpx;
	}
	.ftc6 {
		font-size: #666666;
		margin-left: 15rpx;
	}
	.moreIconHui {
		width: 27rpx;
		height: 27rpx;
		margin-top: 90rpx;
	}
	.appointmentInfoBox2 {
		width: 100%;
		min-height: 200rpx;
		display: flow-root;
		padding-bottom: 20rpx;
		background-color: #F6F7F9;
		border-radius: 20rpx 20rpx 0px 0px;
	}
	.appointmentInfoItem {
		width: 90%;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #222222;
		padding: 0 45rpx;
		margin-bottom: 10rpx;
		padding-top: 20rpx;
		clear: both;
	}
	.appointmentInfoLabel {
		width: 40%;
		text-align: left;
	}
	.appointmentInfoLabel2 {
		width: 22%;
		text-align: left;
	}
	.tipsTxtBox {
		width: 100%;
	}
	.tipsTxt {
		width: 100%;
		color: #666;
		font-size: 24rpx;
		text-align: center;
	}
	.appointmentInfoTxt {
		width: 60%;
		text-align: right;
	}
/* 	.appointmentInfoBtn {
		width: 140rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 30rpx;
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
	} */
	
	.appointmentInfoBtn {
	width: 45%;
	height: 98rpx;
	background: linear-gradient(90deg, #19AD78, #1EBE85);
	border-radius: 49rpx;
	line-height: 98rpx;
	display: block;
	margin: 0 auto;
	font-size: 32rpx;
	color: #FFFFFF;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	text-align: center;
	}
	
	
	.appointmentInfoBox3 {
		width: 100%;
		clear: both;
	}
	.appointmentInfoSubTxt {
		margin-top: 32rpx;
		text-align: center;
		font-size: 30rpx;
		color: #666666;
	}
	.appointmentInfoState {
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #FFEEE7;
		border-radius: 4rpx;
		font-size: 30rpx;
		color: #FF072A;
		text-align: center;
		display: block;
		margin: 0 auto;
		margin-top: 46rpx;
		margin-bottom: 36rpx;
	}
	.appointmentInfoNum {
		font-size: 32rpx;
		color: #222222;
		text-align: center;
		margin-bottom: 36rpx;
	}
	.scanImg {
		width: 380rpx;
		height: 380rpx;
		display: block;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	.timeListItem {
		min-width: 198rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #F9FFFD;
		border: 2px solid #19AD78;
		border-radius: 10rpx;
		margin-left: 34rpx;
		float: left;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		color: #19AD78;
		text-align: center;
	}
	.stationItem {
		min-width: 198rpx;
		height: 90rpx;
		line-height: 42rpx;
		background: #F9FFFD;
		border: 2px solid #19AD78;
		border-radius: 10rpx;
		margin-left: 34rpx;
		float: left;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		color: #19AD78;
		text-align: center;
	}
	.qrImg {
		margin-top: 20rpx;
	}
/* 	
原来的样式
.submitBtnBox {
		width: 100%;
		background-color: #FFFFFF;
		height: 140rpx;
		position: fixed;
		bottom: -1px;
	}
	 */
	.submitBtnBox {
		width: 95%;
		background-color: #FFFFFF;
		height: 140rpx;
		margin: 50px auto;
		
		display: flex;
	}
	.submitBtn {
		width: 45%;
		height: 98rpx;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 49rpx;
		line-height: 98rpx;
		display: block;
		margin: 0 auto;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}
</style>
